<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div id="app">
        <div id="calculator">
            <div class="result" style="grid-area:result">
            {{result}}
        </div>
            
        <button style="grid-area:clear;" @click = "clear()">C</button>
        <button style="grid-area:brackets ;" @click = "bracket()">()</button>
        <button style="grid-area:divide ;" @click = "append('÷')">÷</button>
        <button style="grid-area:mul ;" @click = "append('×')">×</button>
        <button style="grid-area:sub ;" @click = "append('-')">-</button>
        <button style="grid-area:add ;" @click = "append('+')">+</button>
        <button style="grid-area:equal ;"@click = "calculate()">=</button>
        <button style="grid-area:plus-minus ;" @click = "reverse()">±</button>
        <button style="grid-area:dot ;" @click = "append('.')">.</button>
    
        <button style="grid-area: number-1;" @click = "append(1)">1</button>
        <button style="grid-area: number-2;" @click = "append(2)">2</button>
        <button style="grid-area: number-3;" @click = "append(3)">3</button>
        <button style="grid-area: number-4;" @click = "append(4)">4</button>
        <button style="grid-area: number-5;" @click = "append(5)">5</button>
        <button style="grid-area: number-6;" @click = "append(6)">6</button>
        <button style="grid-area: number-7;" @click = "append(7)">7</button>
        <button style="grid-area: number-8;" @click = "append(8)">8</button>
        <button style="grid-area: number-9;" @click = "append(9)">9</button>
        <button style="grid-area: number-0;" @click = "append(0)">0</button>
        </div>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script src="./script.js"></script>
</body>